<template>
	<view class="content">
		<view class="input-group">
			<view class="input-row border">
				<text class="title">账号：</text>
				<input type="text" v-model="account" placeholder="请输入账号">
			</view>
			<view class="input-row">
				<text class="title">密码：</text>
				<input type="text" password="true" v-model="password" placeholder="请输入密码">
			</view>
		</view>
		<view class="remember-password">
			<checkbox-group style="display: flex; justify-content: space-around;" @change="checkboxChange">
				<label>
					<checkbox value="autoLogin" checked="true" />自动登录</label>
				<label>
					<checkbox value="rememberPassword" checked="true" />记住账号密码</label>
			</checkbox-group>
		</view>
		<view class="btn-row">
			<button type="primary" class="primary" @tap="bindLogin">登录</button>
		</view>
		<view class="action-row">
			<!-- <navigator url="../reg/reg?type=1">注册账号</navigator>
			<text>|</text> -->
			<navigator url="../reg/reg?type=0">忘记密码</navigator>
		</view>
		<!-- <view class="oauth-row" v-if="hasProvider" v-bind:style="{top: positionTop + 'px'}">
			<view class="oauth-image" v-for="provider in providerList" :key="provider.value">
				<image :src="provider.image" @tap="oauth(provider.value)"></image>
			</view>
		</view> -->
	</view>
</template>

<script>
	import service from '../../service.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				providerList: [],
				hasProvider: false,
				account: '',
				password: '',
				positionTop: 0,
				chooseArr: ["autoLogin", "rememberPassword"]
			}
		},
		computed: mapState(['forcedLogin']),
		onLoad() {
			this.initPosition();
			this.initProvider();
			let loginData = uni.getStorageSync("loginData")
			if (loginData) {
				this.account = loginData.name;
				this.password = loginData.password;
			}
		},
		methods: {
			...mapMutations(['login']),
			checkboxChange(e) {
				this.chooseArr = e.detail.value
			},
			initProvider() {
				// const filters = ['weixin', 'qq', 'sinaweibo'];
				const filters = ['weixin'];
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (res.provider && res.provider.length) {
							for (let i = 0; i < res.provider.length; i++) {
								if (~filters.indexOf(res.provider[i])) {
									this.providerList.push({
										value: res.provider[i],
										image: '../../static/img/' + res.provider[i] + '.png'
									});
								}
							}
							this.hasProvider = true;
						}
					},
					fail: (err) => {
						console.error('获取服务供应商失败：' + JSON.stringify(err));
					}
				});
			},
			initPosition() {
				/**
				 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
				 * 反向使用 top 进行定位，可以避免此问题。
				 */
				this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
			},
			bindLogin() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				if (this.account.length < 5) {
					uni.showToast({
						icon: 'none',
						title: '账号最短为 5 个字符'
					});
					return;
				}
				if (this.password.length < 5) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 5 个字符'
					});
					return;
				}
				/**
				 * 下面简单模拟下服务端的处理
				 * 检测用户账号密码是否在已注册的用户列表中
				 * 实际开发中，使用 uni.request 将账号信息发送至服务端，客户端在回调函数中获取结果信息。
				 */

				const data = {
					name: this.account,
					password: this.password
				};
				if (this.chooseArr.some(item => item === 'rememberPassword')) {
					uni.setStorageSync("loginData", data)
				} else {
					uni.removeStorageSync('loginData');
				}
				uni.showLoading({
					title: '加载...',
					mask: false
				});
				this.$request({
					url: this.$store.state.baseUrl + '/lwj/login',
					method: 'POST',
					data: data,
					success: (res) => {
						if (res.data.code === 1) {
							// this.toMain();
							this.$store.commit('setLoginState', {
								hasLogin: true,
								token: res.data.data.token,
								uid: res.data.data.uid,
								is_manager: res.data.data.is_manager,
								userName: res.data.data.name
							})
							uni.reLaunch({
								url: '../main/main'
							})
						} else if (res.data.code === 1000) {
							this.$store.commit('setLoginState', {
								hasLogin: true,
								token: res.data.data.token,
								uid: res.data.data.uid,
								is_manager: res.data.data.is_manager,
								userName: res.data.data.name
							})
							uni.showModal({
								title: '提示',
								content: '登录成功，初始密码不安全，请重置密码。',
								showCancel: false,
								success:(res) => {
									if (res.confirm) {
										uni.navigateTo({
											url: '../reg/reg?type=0'
										})
									}
								}
							});
						} else {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false
							});
						}
					},
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '用户账号或密码不正确',
						});
					},
					complete: () => {}
				});
			},
			oauth(value) {
				uni.login({
					provider: value,
					success: (res) => {
						// #ifdef APP-PLUS
						console.log(res.authResult.openid)
						// #endif
						// #ifdef MP-WEIXIN
						if (res.code) {
							console.log(res.code)
						} else {
							console.log('获取用户登录态失败！' + res.errMsg);
						}
						// #endif
						// uni.getUserInfo({
						// 	provider: value,
						// 	success: (infoRes) => {
						// 		console.log(JSON.stringify(infoRes))
						// 		/**
						// 		 * 实际开发中，获取用户信息后，需要将信息上报至服务端。
						// 		 * 服务端可以用 userInfo.openId 作为用户的唯一标识新增或绑定用户信息。
						// 		 */
						// 		this.toMain(infoRes.userInfo.nickName);
						// 	}
						// });
					},
					fail: (err) => {
						console.error('授权登录失败：' + JSON.stringify(err));
					}
				});

			},
			toMain() {
				/**
				 * 强制登录时使用reLaunch方式跳转过来
				 * 返回首页也使用reLaunch方式
				 */
				if (this.forcedLogin) {
					uni.reLaunch({
						url: '../main/main',
					});
				} else {
					uni.navigateBack();
				}

			}
		}
	}
</script>

<style>
	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.action-row navigator {
		color: #007aff;
		padding: 0 20px;
	}

	.oauth-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.oauth-image {
		width: 100px;
		height: 100px;
		border: 1px solid #dddddd;
		border-radius: 100px;
		margin: 0 40px;
		background-color: #ffffff;
	}

	.remember-password {
		text-align: right;
		margin-top: 40upx;
		margin-bottom: 20upx;
		color: #999999;
	}

	.oauth-image image {
		width: 60px;
		height: 60px;
		margin: 20px;
	}

	.input-group {
		margin-top: 160upx;
	}
</style>
